<template>
  <div>
      <d2-crud
      :loading="loading"
      :pagination="pagination"
      @pagination-current-change="paginationCurrentChange"
      ref="d2Crud"
      :columns="columns"
      add-title="新增"
      :data="data"
      :form-options="formOptions"
      @row-add="handleRowAdd"
      :rowHandle="rowHandle"
      edit-title="修改"
      :edit-template="editTemplate"
      @row-edit="handleRowEdit"
      @row-remove="handleRowRemove"
      @dialog-cancel="handleDialogCancel">
      <el-button slot="header" style="margin-bottom: 5px" @click="addRowWithNewTemplate">新增</el-button>
    </d2-crud>


  </div>
</template>

<script>
import util from '@/libs/util'
const token = util.cookies.get('token')
const uuid = util.cookies.get('uuid')
export default {
  data () {
    return {
      columns: [
        {
          title: '编号',
          key: 'id',
          forbidEdit: true
        },
        {
          title: '书名',
          key: 'title',
        },
        {
          author: '作者',
          key: 'author'
        },
        {
          pages: '页数',
          key: 'pages'
        },
        {
          publiser: '出版社',
          key: 'publiser'
        },
        {
          publis_time: '出版时间',
          key: 'date'
        }
      ],
      data: [],
      loading: false,
      pagination: {
        page: 1,
        pageSize: 5,
        total: 0
      },
      formOptions: {
        labelWidth: '80px',
        labelPosition: 'left',
        saveLoading: false
      },
      rowHandle: {
        columnHeader: '编辑表格',
        edit: {
          icon: 'el-icon-edit',
          text: '编辑',
          size: 'small',
          show (index, row) {
              return true
          },
        },
        remove: {
          icon: 'el-icon-delete',
          size: 'small',
          fixed: 'right',
          confirm: true,
          show (index, row) {
            return true
          }
        }
      },
      
      editTemplate: {
        // id: {
        //     title: '编号',
        //     value: '',
            
        // },
        title: {
            title: '书名',
            value: ''
        },
        author : {
            title: '作者',
            value: ''
        },
        pages: {
            title: '页数',
            value: ''
        },
        publiser: {
            title: '出版社',
            value: ''
        },
        forbidEdit: {
          title: '禁用按钮',
          value: false,
          component: {
            show: false
          }
        },
        showEditButton: {
          title: '显示按钮',
          value: true,
          component: {
            show: false
          }
        }
      },
      
    }
  },
  mounted () {
    this.fetchData()
  },
  methods: {
    handleRowRemove ({ index, row }, done) {
      this.formOptions.saveLoading = true
      this.$api.BOOKS_DEL({
        ...row
      }).then(res => {
        this.$message({
            message: '删除成功',
            type: 'success'
        });
        done()
          this.formOptions.saveLoading = false
      }).catch(err => {
        //    this.$message({
        //         message: err,
        //         type: 'warning'
        //     });
        // done()
        this.formOptions.saveLoading = false
      })
    },
    handleRowEdit ({ index, row }, done) {
      this.formOptions.saveLoading = true
      this.$api.BOOKS_EDIT({
        ...row
      }).then(res => {
          this.$message({
                message: res.msg,
                type: 'success'
            });
            done()
          this.formOptions.saveLoading = false
      }).catch(err => {
        //    this.$message({
        //         message: err,
        //         type: 'warning'
        //     });
        done()
        this.formOptions.saveLoading = false
      })
    },
    handleDialogOpen ({ mode }) {
      this.$message({
        message: '打开模态框，模式为：' + mode,
        type: 'success'
      })
    },
    handleRowAdd (row, done) {
      this.formOptions.saveLoading = true
      this.$api.BOOKS_ADD({
        ...row
      }).then(res => {
          this.$message({
                message: res.msg,
                type: 'success'
            });
            done({
            date: '2021-3-30'
          })
          this.formOptions.saveLoading = false
      }).catch(err => {
        //    this.$message({
        //         message: err,
        //         type: 'warning'
        //     });
        this.formOptions.saveLoading = false
      })
    },
    handleDialogCancel (done) {
      done()
    },
    addRowWithNewTemplate () {
      this.$refs.d2Crud.showDialog({
        mode: 'add',
        template: {
          title: {
            title: '书名',
            value: ''
          },
          author : {
            title: '作者',
            value: ''
          },
          pages: {
            title: '页数',
            value: ''
          },
          publiser: {
            title: '出版社',
            value: ''
          }
        }
      })
    },
    paginationCurrentChange (page) {
      this.pagination.page = page
      this.fetchData()
    },
    fetchData () {
      this.loading = true
      
      this.$api.BOOKS_LIST({
        ...this.pagination
      }).then(res => {
        this.data = res.data
        this.pagination.total = res.to
        this.pagination.pageSize = res.per_page
        this.pagination.page = res.from
        this.loading = false
      }).catch(err => {
        console.log('err', err)
        this.loading = false
      })
    }
  }
}
</script>